<template>
  <view class="index">

    <!-- 1.0 顶部搜索框 -->
    <view class="top-search">
      <u-search
        bgColor="#fff"
        shape="square"
        :show-action="false"
        placeholder="日照香炉生紫烟"
      ></u-search>
    </view>
    <!-- 1.0 顶部搜索框 -->

    <!-- 2.0 轮播图 -->
    <!-- 
      轮播图的宽度 / 原图片的宽度  =  轮播图的高度   / 原图片的高


      轮播图的高度 = 原图片的高 * 轮播图的宽度 /   原图片的宽度
      轮播图的高度 = 原图片的高 * 轮播图的宽度 /   原图片的宽度
                  =  340 * 750rpx /  750 
                  = 340rpxx
     -->
    <u-swiper
      keyName="image_src"
      indicator
      indicatorMode="line"
      circular
      height="340rpx"
      :list="swiperList"
    ></u-swiper>
    <!-- 2.0 轮播图 -->

    <!-- 3.0 导航模块 -->
    <view class="navs">
      <navigator
        v-for="item in  navs"
        :key="item.name"
      >
        <u--image
          width="100%"
          mode="widthFix"
          :src="item.image_src"
        ></u--image>
      </navigator>
    </view>
    <!-- 3.0 导航模块 -->

    <!-- 4.0 楼层 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <!-- 4.1 标题 -->
        <view class="floor-group-title">
          <u--image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u--image>
        </view>
        <!-- 4.2 内容 -->
        <view class="floor-group-content">
          <navigator
            v-for="(item2,index2) in item1.product_list"
            :key="item2.name"
          >

            <u--image
              v-if="index2===0"
              width="100%"
              mode="widthFix"
              :src="item2.image_src"
            ></u--image>

            <u--image
              v-else
              width="100%"
              height="188rpx"
              mode="scaleToFill"
              :src="item2.image_src"
            ></u--image>
          </navigator>
        </view>
      </view>
    </view>
    <!-- 4.0 楼层 -->
  </view>
</template>
<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperList: [],
      // 导航数组
      navs: [],
      // 楼层数组
      floorList: [],
    };
  },
  // vue created
  // 小程序 onLoad
  // uniapp  应用-页面生命周期都是使用  小程序
   onLoad() {
    Promise.all([this.getSwiperList(), this.getNavs(), this.getFloorList()]);
    // const [err, result] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
    // });
    // // console.log(result);
    // this.swiperList = result.data.message;

    // // 导航数组
    // const [err1, result1] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
    // });
    // this.navs = result1.data.message;

    // // 楼层数组
    // const [err2, result2] = await uni.request({
    //   url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
    // });
    // this.floorList = result2.data.message;
  },
  methods:{
    async getSwiperList(){
    const { message: swiperList } = await uni.$u.http.get("/home/swiperdata");
      this.swiperList = swiperList
    },
     async getNavs(){
       const { message: navs } = await uni.$u.http.get("/home/catitems");
      this.navs = navs;
    },
    async getFloorList(){
      const { message: floorList } = await uni.$u.http.get("/home/floordata");
      this.floorList = floorList;
    }
  }
};
</script>
<style lang="scss">
/* 
移动端页面  
自适应   屏幕越大 元素就越大  rpx vw 

将设计稿的大小设置为 375px
750rpx =  375px

1px = 2rpx

750rpx = 750px
1px 
 */
.top-search {
  padding: 10rpx;
  background-color: #eb4450;
}
.navs {
  display: flex;
  navigator {
    flex: 1;
    padding: 20rpx;
  }
}
.floor {
  .floor-group-content {
    // 清除浮动
    overflow: hidden;
    navigator {
      width: 232rpx;
      margin-left: 15rpx;
      float: left;

      /* 
      几张图片的大小不一致 无法直接使用图片高度自适应的设置 
      得要靠自己去计算图片的高度
      1 第一张图片的高度 当时可以使用高度自适应。。
      2 后四张图片的高度，手动去计算，高度等于第一张图片高度的一半即可！！ 
      
       */

      /* 后四个导航标签 */
      // &:nth-last-child(-n + 4) {
      //   image {
      //     height: 188rpx;
      //   }
      // }

      &:nth-last-child(-n + 2) {
        // 后两个导航标签
        margin-top: 15rpx;
      }
    }
  }
}
</style>